<template>
	<!-- 门店列表 -->
	<scroll-view :scroll-y="true" class="scrollSty" @scrolltolower="scrolltolowerFnc">
		<view class="storeList-main">
			<view class="searchPage-input">
				<uni-search-bar
					radius="50"
					v-model="cloudQuery.keyword"
					style="flex: 1"
					placeholder="请输入门店名称"
					clearButton="always"
					cancelButton="none"
					@confirm="search"
					@cancel="search"
					@clear="clearSearch"
				/>
				<text class="searchPage-title" @click="search">搜索</text>
			</view>

			<view class="storeList">
				<hwxcBrand v-for="(item, index) in cloudStoreListData" :key="item.id" :cloudStoreInfo="item" />
			</view>
		</view>
	</scroll-view>
</template>

<script>
import hwxcBrand from '../../components/hwxcBrand/hwxcBrand.vue';
import { cloudStoreList } from '../../api/merchant/index';
import { flashlist } from '../../api/flash/index.js';
export default {
	data() {
		return {
			// 品牌门店数据
			cloudStoreListData: [],
			cloudQuery: {
				page: 1,
				limit: 10,
				keyword: ''
			},
			lng:"",
			lat:""
		};
	},

	components: {
		hwxcBrand
	},

	async onLoad(option) {
		const { lng, lat } = option;
		this.lng = lng;
		this.lat = lat;
		if (lng & lat) {
			await this.getflashlist(lng, lat);
		} else {
			await this.getCloudStoreList();
		}
	},

	methods: {
		// 获取门店列表 - 云店
		async getCloudStoreList() {
			try {
				const query = {
					page: this.cloudQuery.page,
					limit: this.cloudQuery.limit
				};

				if (this.cloudQuery.keyword) {
					query.keyword = this.cloudQuery.keyword;
				}

				const resData = await cloudStoreList(query);				
				let list = resData.data.data || [];
				const shopListData = [...(this.cloudStoreListData || []), ...list];
				this.cloudStoreListData = shopListData;
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取门店列表 - 闪送
		async getflashlist(lng, lat) {
			try {
				const resData = await flashlist({
					lng,
					lat
				});
				let list = resData.data.data || [];
				const shopListData = [...(this.cloudStoreListData || []), ...list];
				this.cloudStoreListData = shopListData;
			} catch (e) {
				throw Error(e);
			}
		},

		search() {
			this.cloudQuery.page = 1;
			this.cloudStoreListData = [];
			this.getCloudStoreList();
		},

		clearSearch() {
			this.cloudQuery.keyword = '';
			this.search();
		},
		
		// 触底
		async scrolltolowerFnc() {
			this.cloudQuery.page++;
			if (this.lng & this.lat) {
				await this.getflashlist(lng, lat);
			} else {
				await this.getCloudStoreList();
			}
		},
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	height: 100%;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow: scroll;
}
.storeList-main {
	.searchPage-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		.searchPage-title {
			margin-right: 20rpx;
			color: #444;
			font-size: 26rpx;
		}
	}

	.storeList {
		box-sizing: border-box;
		padding: 20rpx;
		padding-top: 0px;
	}
}
</style>
